<template>
    <div ref="chartRef"  style="width:60%; height: 400px;" ></div>
  </template>
  
  <script setup>
  import { onMounted, onBeforeUnmount, ref, watch, toRefs } from 'vue';
  import * as echarts from 'echarts';
  

  const props = defineProps({
  chartData_line: {
    type: Object,
    default: () => ({
      xAxis: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      series: [150, 230, 224, 218, 135, 147, 260],
      series_1: [150, 230, 224, 218, 135, 147, 260]
    })
  }
});
const { chartData_line } = toRefs(props); 


  const chartRef = ref(null);
  let Chart_line = null;
  
  const initChart = () => {
    Chart_line = echarts.init(chartRef.value);
    const option = {
      title: {
        text: '标题'
      },
      xAxis: {
        type: 'category',      //表示分类轴。
        data: chartData_line.value.xAxis
      },
      yAxis: {
        type: 'value' 
      },
      series: [
        {
          data: chartData_line.value.series,
          type: 'line'
          // smooth: true平滑折线图
        },
        {
          data: chartData_line.value.series_1,
          type: 'line'
        }
      ]
    };
    Chart_line.setOption(option);
// 处理点击事件并且跳转到相应的百度搜索页面
Chart_line.on('click', function(params) {
 console.log(params);
  // window.open('https://www.baidu.com/s?wd=' + encodeURIComponent(params.name));
});
}
// 监听 chartData_line 变化
  watch(chartData_line, () => {
  if (Chart_line) {
    Chart_line.setOption({
      xAxis: {
        data: chartData_line.value.xAxis
      },
      series: [
        {
          data: chartData_line.value.series
        }
      ],
      series_1: [
        {
          data: chartData_line.value.series_1
        }
      ]
    });
  }
});


  onMounted(() => {
    initChart();
  });
  
  onBeforeUnmount(() => {
    if (Chart_line) {
      Chart_line.dispose();
    }
  });
  </script>
  
  <style scoped>
  /* 可以根据需要添加样式 */
  </style>